<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公司购物</el-breadcrumb-item>
      <el-breadcrumb-item>
        商品详情 / 
        <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20" v-if="detail">
      <el-col :span="8" :offset="1" class="item-pic magnifier-box">
        <pic-zoom :url="detail.img" :scale="3" class="boximg"   position= "relative" top= "120px" left= "200px"
  ></pic-zoom>
      </el-col>
      <el-col :span="8" :offset="1" style="font-size:18px">
        
        <el-link>{{detail.name }}</el-link>
         <br>
        <p style="color:#67C23A">分类 : {{detail.type.text}}</p>
         <br>
        <h6>
          单价:
          <span style="color:#F56C6C">￥ {{detail.price }}</span>
        </h6>
        <br>
        <h6>
          折扣:
          <span style="color:#303133">{{detail.discount }}</span>
        </h6>
         <br>
        <div class="margintop20">
          <span style="color:#303133">购买数量:</span>
          <el-input-number v-model="count" :min="1"></el-input-number>
        </div>
             <br>
        <div class="margintop20">
          <el-button type="success" size="mini" @click="addToshopcar">加入购物车</el-button>
          <el-button type="danger" size="mini" @click="gotobuygood">查看我的商品(购买)</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getgoodone, addtocartajax } from "@/api";
import PicZoom from "vue-piczoom";
export default {
  data() {
    return {
      msg: "我是子组件的msg",
      name: "App",
      list: [],
      info: {},

      value: "",
      num: 1,
      detail: null,
      count: 1,
    };
  },
  components: {
    PicZoom,
  },
  methods: {
    gotobuygood() {
      this.$router.push({ name: "mygood" });
    },
    addToshopcar() {
      addtocartajax({
        goodId: this.$route.params.goodId,
        good: this.detail,
        count: this.count,
      }).then((res) => {});
      // who
      // goodid  (detail)
      // count
    },
  },
  mounted() {
    getgoodone({
      _id: this.$route.params.goodId,
    }).then((res) => {
      if (res.type) {
        this.detail = res.result;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.boximg {
  height: 420px;
  width: 100%;
}
.item-pic{
    position: relative;
    top: -128px !important;
   left: -300px !important; 
}

.magnifier-box{
   position: relative;
   top: 128px;
   left: 300px;
}
</style>